<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <link href="static/images/favicon.ico" rel="icon" type="image/x-icon"/>
  <title>四维交通指数</title>
  <!--<link rel="stylesheet" href="http://minedata.cn/minemapapi/v1.3/minemap.css">-->
  <!--<script src="http://minedata.cn/minemapapi/v1.3/minemap.js"></script>-->

  <link rel="stylesheet" href="//minedata.cn/minemapapi/v1.3/minemap.css">
  <link rel="stylesheet" href="static/fonts/font.css">
  <script src="//minedata.cn/minemapapi/v1.3/minemap.js"></script>
  <!--<script src="static/lib/minemap/minemap.js"></script>-->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      width: 100%;
      height: 100%;
      background-color: #000;
      font-size: 12px;
    }

    .bling {
      position: relative;
      top: 0;
      left: 0;
      opacity: 0.7;
    }

    .bling:before,
    .bling:after {
      content: '';
      display: block;
      position: absolute;
      width: 30px;
      height: 30px;
      left: 0px;
      top: 0px;
      border-radius: 30px;
      opacity: 0.3;
      animation-name: Grow;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      /* Safari and Chrome */

      -webkit-animation-name: Grow;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
    }

    .bling-base:before {
      box-shadow: 0px 0px 2px 10px #3baa14;
    }

    .bling-base:after {
      box-shadow: inset 0px 0px 15px 8px #3baa14;
    }

    .bling-green:before {
      box-shadow: 0px 0px 2px 10px #64e60d;
    }

    .bling-green:after {
      box-shadow: inset 0px 0px 15px 8px #64e60d;
    }

    .bling-yellow:before {
      box-shadow: 0px 0px 2px 10px #ffd200;
    }

    .bling-yellow:after {
      box-shadow: inset 0px 0px 15px 8px #ffd200;
    }

    .bling-line:before {
      box-shadow: 0px 0px 2px 10px #ff6312;
    }

    .bling-line:after {
      box-shadow: inset 0px 0px 15px 8px #ff6312;
    }

    .bling-red:before {
      box-shadow: 0px 0px 2px 10px #ff003b;
    }

    .bling-red:after {
      box-shadow: inset 0px 0px 15px 8px #ff003b;
    }

    @-webkit-keyframes Grow {
      0% {
        transform: scale(0.4);
        -ms-transform: scale(0.4);
        /* IE 9 */

        -webkit-transform: scale(0.4);
        /* Safari and Chrome */

        opacity: 0.8;
      }
      50% {
        opacity: 1;
      }
      60% {
        transform: scale(0.6);
        -ms-transform: scale(0.6);
        /* IE 9 */

        -webkit-transform: scale(0.6);
        /* Safari and Chrome */

        opacity: 0.8;
      }
      100% {
        transform: scale(0.4);
        -ms-transform: scale(0.4);
        /* IE 9 */

        -webkit-transform: scale(0.4);
        /* Safari and Chrome */

        opacity: 0.8;
      }
    }

    .minemap-ctrl-bottom-left .minemap-ctrl a.minemap-ctrl-logo {
      display: none;
    }

    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track-piece {
      background: rgba(32, 221, 201, 0.20);
      border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb:vertical {
      height: 10px;
      background: rgba(32, 221, 201, 0.80);
      -webkit-border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb:horizontal {
      width: 10px;
      background: rgba(32, 221, 201, 0.80);
      -webkit-border-radius: 8px;
    }

    i.list-icon{
      display:inline-block;
      width:8px;
      height:8px;
      background-color: #b3304f;
      border-radius: 50%;
      margin-right: 6px;
    }

  </style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="static/lib/echart/echarts.min.js"></script>
<script src="static/lib/turf/turf.min.js"></script>
<script>

</script>
</body>
</html>
